<template>
	<view>
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed cuImg" :style="{
				height: $wanlshop.wanlsys().height + 'px', 
				paddingTop: $wanlshop.wanlsys().top + 'px',
				color: '#fff',
				background:'#FA802A'
			}">
				<view class="action">
					<view @click="goBack()">
						<uni-icons type="left" size="26" color="#333"></uni-icons>
					</view>

					<!-- <view style="" class="actionSearch">
						<uni-icons type="search" size="20" color="#fff" class="actionSearchIcon"></uni-icons>
						<view class="actionSearchText">搜索</view>
					</view> -->
					<!-- <image src="/static/my/fanhui.png" class="fanhui"></image> -->
				</view>

			</view>
		</view>

		<view class="top">
			<view class="topBg"></view>
			<view class="topView">
				<view class="topViewFlex" @tap="$wanlshop.auth('/pages/restaurant/user/store/detail')">
					<image src="/static/restaurant/common/store.png" class="topViewFlexImg" mode="widthFix"></image>
					<view class="topViewFlexRight">
						<view class="rightFlex">
							<view class="rightFlexTitle">{{storeInfo.name}}</view>
							<uni-icons type="right" size="20" color="#333" class="rightFlexIcon"></uni-icons>
						</view>
						<view class="rightBottom">营业时间：{{storeInfo.business_hours}}</view>
					</view>
				</view>
				

				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000"
					:duration="500" style="height: 270rpx;margin-top: 30rpx;border-radius: 10rpx;overflow: hidden;">
					<swiper-item v-for="(item,index) in storeInfo.images_text" :key="index">
						<image :src="$wanlshop.oss(item)" class="topViewImg" mode="aspectFill">
						</image>
					</swiper-item>
				</swiper>

			</view>
		</view>


		<view class="scroll-view-container">
			<!-- 左侧的滑动区域 -->
			<scroll-view class="left-scroll-view" scroll-y="true" :style="{height: wh + 'px'}">
				<block v-for="(item, i) in cateList" :key="i">
					<view :class="['left-scroll-view-item', i === active ? 'active' : '']" @click="activeChanged(i)">
						{{item.name}}
					</view>
				</block>
			</scroll-view>
			<!-- 右侧的滑动区域 -->
			<scroll-view scroll-y="true" :style="{height: wh + 'px'}" class="scrollY" :scroll-top="scrollTop" @scrolltolower="scrolltolower">
				<!-- 当前二级分类下的三级分类列表 -->
				<s-skeleton type="list" :loading="loading3"></s-skeleton>
				<view class="cate-lv3-list">
					<!-- 三级分类的Item项 -->
					<view class="cate-lv3-item" v-for="(item, ind) in cateLevel" :key="ind">
						<!-- 三级分类的图片 -->
						<image :src="$wanlshop.oss(item.image)" mode="aspectFill"></image>
						<!-- 三级分类的文本 -->
						<view class="cate-lv3-item-right">
							<view class="title text-cut-2">{{item.title}}</view>
							<view class="text text-cut-1">{{item.sub_title}}</view>
							<view class="sales">销量 {{item.sales}}</view>
							<view class="btm">

								<view class="money">￥<text>{{item.price}}</text></view>
								<view class="flex right">
									<block v-if="item.stock >0">
										<view class="min" @click="min(item,ind)"><uni-icons type="minus" size="22"
												:color="common.store.shop_status == 1 ? '#FA802A' : '#ccc'"></uni-icons>
										</view>
										<view class="num">{{item.num}}</view>
									</block>
									<view class="add" @click="add(item,ind)"><uni-icons type="plus-filled" size="22"
											:color="common.store.shop_status == 1 ? '#FA802A' : '#ccc'"></uni-icons></view>
								</view>

							</view>
						</view>

					</view>
				</view>
				<s-empty padding="100rpx 0" v-if="cateLevel.length == 0"></s-empty>
			</scroll-view>
		</view>
		<view class="footer" v-if="common.store.shop_status == 1">
			<image src="/static/restaurant/index/shop2.png" class="footerImg"></image>
			<view class="money">合计：<text class="text1">￥</text><text class="text2">{{totalPrice}}</text></view>
			<view class="fonterBtn" @tap="onsubmit">去结算</view>
		</view>
		<view class="footer" v-else @tap="notSell">
			<text class="disabled">本店{{common.store.shop_status == 2 ? '暂停营业' : common.store.shop_status == 3 ? '停止营业' : ''}}</text>
		</view>


	
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				loading3: true,
				storeInfo: {
					name: '',
					citys: '',
					address: '',
					business_hours: '7:00-21:00',
					images_text: []
				},
				wh: 0,
				cateList: [],
				active: 0,
				// 菜
				cateLevel: [],
				scrollTop: 0,
				category_id: '',
				cartList:[],
				is_takeaway: 2, // 1 外卖 2 堂食
				
				reload: false, //判断是否上拉
				total: 0, //数据量
				current_page: 1, //当前页码
				last_page: 1, //总页码
				totalPrice: 0,
				
				
				
			}
		},
		onLoad(option) {
			this.is_takeaway = option.t;
			const sysInfo = uni.getSystemInfoSync()
			// // #ifdef APP-PLUS
			// this.wh = sysInfo.windowHeight - 341
			// // #endif
			// #ifndef H5
			this.wh = sysInfo.windowHeight - 341
			// #endif
			// #ifdef H5
			this.wh = sysInfo.windowHeight - 300
			// #endif
		},
		onShow() {
			this.current_page = 1;
			this.reload = true;
			this.loadData()
			this.getGoodsCategory()
		},
		computed: {
			...mapState(['common'])
		},
		methods: {
			onsubmit() {
				if(this.cartList.length == 0) return this.$wanlshop.msg('请选择商品后再去结算')
				this.$wanlshop.to(`/pages/restaurant/index/submit?t=${this.is_takeaway}`)
			},
			scrolltolower(e) {
				if (this.current_page >= this.last_page) {
					this.status = 'noMore';
				} else {
					this.reload = false;
					this.current_page = this.current_page + 1; //页码+1
					this.status = 'loading';
					this.getGoodsList();
				}
			},
			async addCarStorage(data,type) {
				let res = await this.$api.addCarStorage({
					type: type,
					data: data
				});
				if (res.code == 1) {
					this.cartList = res.data.list;
					this.totalPrice = res.data.sum_price
				}
			},
			async loadData() {
				let res = await this.$api.getStore({
					storeid: this.common.store && this.common.store.id
				});
				if (res.code == 1) {
					if(res.data.content) {
						res.data.content = res.data.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (
							match, capture) => {
							var img =
								`<img style="display: block; max-width: 100%;" src="${this.$wanlshop.oss(capture)}">`;
							return img;
						});
					}
					this.$store.dispatch('common/setStore', res.data);
					let data = res.data;
					this.storeInfo.name = data.name
					this.storeInfo.images_text = data.images_text
					// this.storeInfo.citys = data.citys
					// this.storeInfo.address = data.address
					this.storeInfo.business_hours = data.business_hours
				}
			},
			async getGoodsCategory() {
				let res = await this.$api.getGoodsCategory({
					shop_id: this.common.store && this.common.store.id
				});
				if (res.code == 1) {
					this.cateList = [{name:'全部',id:''}].concat(res.data);
					// this.category_id = res.data[0].id
					this.getGoodsList()
				}
			},
			async getGoodsList(category_id) {
				let result = null;
				if(this.current_page == 1) {
					result = await this.$api.getCarStorage({
						cart: []
					});
					if (result.code == 1) {
						this.cartList = result.data.list;
						this.totalPrice = result.data.sum_price
					}
					
				}
				let res = await this.$api.getGoodsList({
					page:this.current_page,
					category_id: category_id || this.category_id,
					order_by: 'sale_desc',
				});
				if (res.code == 1) {
					let array1 = res.data.data;
					let array2 = [];
					if(this.current_page == 1) {
						array2 = result.data.list;
					} else {
						array2 = this.cartList
					}
					array1.forEach(item1 => {
						item1.num = 0
					  let item2 = array2.find(item => item.goods_id === item1.id);
					  if (item2) {
					    item1.num = item2.number;
					  }
					});
					this.loading3 = false
					this.cateLevel = this.reload ? array1 : (this.cateLevel || []).concat(array1); //数据 追加
					this.total = res.data.total; //数据量
					this.current_page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
				}
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			activeChanged(i) {
				this.loading3 = true
				this.current_page = 1;
				this.reload = true;
				this.active = i
				this.category_id = this.cateList[i].id;
				this.getGoodsList(this.cateList[i].id)

				this.scrollTop = this.scrollTop === 0 ? 1 : 0
			},
			min(item, index) {
				let arr = ['','正常营业','本店暂停营业','本店已停止营业']
				if(this.common.store.shop_status > 1) return this.$wanlshop.msg(arr[this.common.store.shop_status])
				if(item.num == 0) return false;
				this.cateLevel[index].num -= 1
				this.addCarStorage({
					goods_id:this.cateLevel[index].id,
					number:1
				},'bcsub')
			},
			add(item, index) {
				let arr = ['','正常营业','本店暂停营业','本店已停止营业']
				if(this.common.store.shop_status > 1) return this.$wanlshop.msg(arr[this.common.store.shop_status])
				if(item.num == item.stock) return this.$wanlshop.msg('库存不足');
				this.cateLevel[index].num += 1
				this.addCarStorage({
					goods_id:this.cateLevel[index].id,
					number:1
				},'add')
			},
			notSell() {
				
					let arr = ['','正常营业','本店暂停营业','本店已停止营业']
					if(this.common.store.shop_status > 1) return this.$wanlshop.msg(arr[this.common.store.shop_status])
			}
		}
	}
</script>


<style lang="scss">
	page {
		background: #fff;
	}

	.actionSearch {
		width: 184rpx;
		height: 68rpx;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		border: 2rpx solid #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;

		.actionSearchIcon {
			display: block;
		}

		.actionSearchText {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-left: 16rpx;
		}
	}

	.top {
		width: 100%;
		height: auto;

		.topBg {
			width: 100%;
			height: 48rpx;
			background: #FA802A;
		}

		.topView {
			width: 100%;
			height: auto;
			background: #FFFFFF;
			padding: 30rpx 24rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-top: -20rpx;

			.topViewFlex {
				width: 100%;
				height: auto;
				display: flex;
				align-items: center;
				padding: 0 26rpx;

				.topViewFlexImg {
					width: 115rpx;
					height: 91rpx;
					display: block;
				}

				.topViewFlexRight {
					width: 520rpx;
					height: auto;

					margin-left: 24rpx;

					.rightFlex {
						display: flex;
						align-items: center;

						.rightFlexTitle {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 38rpx;
							color: #333333;
						}

						.rightFlexIcon {
							font-weight: bold;
							display: block;

						}
					}

					.rightBottom {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #6B6B6B;
					}
				}


			}
			.coupons {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0 0 26rpx;
				.left {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.tag {
						font-size: 20rpx;
						color: #f00;
						border: 1px solid #f00;
						border-radius: 6rpx;
						padding: 0 10rpx;
						margin-right: 10rpx;
						&:last-child {
							margin-right: 0;
						}
					}
				}
				.right {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					> text {
						font-size: 24rpx;
						color: #888;
					}
				}
			}
			.topViewImg {
				border-radius: 10rpx;
				width: 702rpx;
				height: 270rpx;
			}
		}
	}

	.scroll-view-container {
		display: flex;

		.left-scroll-view {
			width: 240rpx;
			padding-bottom: 154rpx;

			.left-scroll-view-item {
				background-color: #F7F7F7;
				line-height: 96rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;

				&.active {
					background-color: #FFFFFF;
					position: relative;

					&::before {
						content: ' ';
						display: block;
						width: 4rpx;
						height: 96rpx;
						background-color: #FA802A;
						position: absolute;
						top: 50%;
						right: 0;
						transform: translateY(-50%);
					}
				}
			}
		}
	}

	.cate-lv3-list {
		margin-left: 20rpx;

		.cate-lv3-item {
			width: 100%;
			display: flex;
			margin-bottom: 20rpx;

			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}

			text {
				font-size: 12px;
			}
		}

		.cate-lv3-item-right {
			width: 286rpx;
			margin-left: 20rpx;
			position: relative;

			.btm {
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
			}
			.sales {
				color: #999;
				font-size: 22rpx;
				margin: 6rpx 0 10rpx 0;
			}
			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				margin-top: 6rpx;
			}

			.money {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FF2222;

				text {
					font-size: 30rpx;
				}

			}

			.right {
				margin-left: auto;

				.num {
					margin: 0 12rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}
			}


		}
	}

	.scrollY {
		padding-bottom: 184rpx;
	}

	.footer {
		width: 694rpx;
		height: 96rpx;
		background: #333333;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		position: fixed;
		bottom: 58rpx;
		left: 28rpx;
		display: flex;
		align-items: center;
		.disabled {
			display: inline-block;
			width: 100%;
			height: 100%;
			text-align: center;
			color: #fff;
			line-height: 96rpx;
			font-size: 32rpx;
		}
		.footerImg {
			width: 62rpx;
			height: 60rpx;
			margin-left: 34rpx;
			margin-right: 10rpx;
		}

		.money {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #FFFFFF;

			text {
				font-weight: bold;
			}

			.text2 {
				font-size: 40rpx;
			}
		}

		.fonterBtn {
			width: 180rpx;
			height: 96rpx;
			background: #FA802A;
			border-radius: 0rpx 48rpx 48rpx 0rpx;
			margin-left: auto;
			text-align: center;
			line-height: 96rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>